<%@page import="fr.uniscol.model.ProgrammeMEF"%>
<%@page import="fr.uniscol.model.Classe"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<jsp:useBean id="scolarite" type="fr.uniscol.model.Scolarite" scope="request" />
<jsp:useBean id="mefs" type="java.util.List<fr.uniscol.model.MEF>" scope="request" />
<jsp:useBean id="classes" type="java.util.List<fr.uniscol.model.Classe>" scope="request" />
<jsp:useBean id="programmes" type="java.util.List<fr.uniscol.model.ProgrammeMEF>" class="java.util.ArrayList" scope="request" />

<link rel="stylesheet" href="<c:url value="/resources/datepicker/css/datepicker.css" />">

<script src="<c:url value="/resources/datepicker/js/bootstrap-datepicker.js"/>"></script>
<style>
    .datepicker {z-index: 1151 !important;}
</style>
<script type="text/javascript">
    
    var PERIODE_TYPE = "${scolarite.periode.type}";
    
	$(document).ready(function(){
		//$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
        
        //var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
        //$.fn.bootstrapDP = datepicker;                 // give $().bootstrapDP the bootstrap-datepicker functionality

        $("#mef").change(onMefChange);
        
        $("#btnEnregistrerScolarite").click(function(){
           document.frmScolarite.submit();
        });
        
        $(".datepicker-input").datepicker({
            format : "dd/mm/yyyy",
            autoclose : true
        }).on("changeDate", onChangeDate);
        
        $("#periode_debut").click(onPeriodeTypeChange);
        $("#periode_intervalle").click(onPeriodeTypeChange);
        $("#periode_fin").click(onPeriodeTypeChange);
	});
    
    function onChangeDate(){
        var periodeTxt = PERIODE_TYPE;
        
        var dateDebut = $("#date_debut").val();
        var dateFin = $("#date_fin").val();
        var dateDebutIntervalle = $("#date_debut_intervalle").val();
        var dateFinIntervalle = $("#date_fin_intervalle").val();

        if(dateDebut != "" && !$("#date_debut").attr("disabled")){
            periodeTxt = periodeTxt + "_" + dateDebut;
        }
        if(dateDebutIntervalle != "" && !$("#date_debut_intervalle").attr("disabled")){
            periodeTxt = periodeTxt + "_" + dateDebutIntervalle;
        }
        if(dateFinIntervalle != "" && !$("#date_fin_intervalle").attr("disabled")){
            periodeTxt = periodeTxt + "_" + dateFinIntervalle;
        }
        if(dateFin != "" && !$("#date_fin").attr("disabled")){
            periodeTxt = periodeTxt + "_" + dateFin;
        }
        $("#periode").val(periodeTxt);
        
        $(this).datepicker("hide");
    }
    
    function onPeriodeTypeChange(){
        
        var type = $("input:radio[name='periode_type']:checked").val();
        
        if(type){
            $("input.periode-date").attr("disabled", "disabled");
            if(type == "debut"){
                $("#date_debut").removeAttr("disabled");
                $("#date_fin").val("");
                $("#date_debut_intervalle").val("");
                $("#date_fin_intervalle").val("");
                $("#date_debut").focus();
                PERIODE_TYPE = "D";
                
            }else if(type == "fin"){
                $("#date_fin").removeAttr("disabled");
                PERIODE_TYPE = "F";
                $("#date_debut").val("");
                $("#date_debut_intervalle").val("");
                $("#date_fin_intervalle").val("");
                $("#date_fin").focus();
                
            }else if(type == "intervalle"){
                $("#date_debut_intervalle").removeAttr("disabled");
                $("#date_fin_intervalle").removeAttr("disabled");
                $("#date_debut_intervalle").focus();
                PERIODE_TYPE = "I";
                $("#date_fin").val("");
                $("#date_debut").val("");
            }
            
            $("#periode").val(PERIODE_TYPE + "_");
        }
    }
    
    function onMefChange(){
        var mefid = $("#mef").val();
        
        //$("#options").load("eleve.scolarite.getmefs?mefid=" + mefid);
        $.ajax({
            url : "eleve.scolarite.getprogrammes",
            dataType: 'json',
            data: {
                    "mefid" : mefid,
                    "modalites" : "O,F"
                   },
            success : function(datas){
                printOptions(datas);
            },
            error : function(){
                alert("Impossible de contacter le serveur !");
            }
        });
    }
    
    function printOptions(programmes){
        var html = "<ul>";
        
        for(var i = 0; i < programmes.length; i++){
            
            var matiere = programmes[i].matiere;
            
            html += "<li>";
            html += "<label for=\"ck_Option_" + matiere.id + "\"><input type=\"checkbox\" id=\"ck_Option_" + matiere.id + "\" name=\"option\" value=\"" + matiere.id + "-" + programmes[i].modalite + "\" />&nbsp;";
            html += programmes[i].matiere.libelleLong + " (" + programmes[i].modalite + ")</label></li>";
        }
        html += "</ul>";
        
        $("#options").html(html);
    }
</script>

<form:form name="frmScolarite" action="eleve.scolarite.save" method="post" modelAttribute="scolarite" cssClass="form-horizontal">
	<input type="hidden" name="eleveid" value="${eleve.id}" />
	<input type="hidden" name="scolariteid" value="${scolarite.id}" />
    
    <div class="form-group">
        <label class="col-sm-2 control-label" for="periode">Période</label>
        <div class="col-sm-10">
            <label for="periode_debut">
                <input type="radio" id="periode_debut" name="periode_type" value="debut" <c:if test="${scolarite.periode.type == 'D'}">checked</c:if>/>
                &nbsp;Depuis le: </label>
                    <input type="text" 
                           name="date_debut" 
                           data-date-format="dd/mm/yyyy"
                           id="date_debut" 
                           class="form-control periode-date datepicker-input" 
                           size="2" 
                           value="<c:if test="${scolarite.periode.type == 'D'}">${scolarite.periode.debutFormated}</c:if>" <c:if test="${scolarite.periode.type != 'D'}">disabled</c:if>
                    />
                <br/>
            <label for="periode_intervalle">
                <input type="radio" id="periode_intervalle" name="periode_type" value="intervalle" <c:if test="${scolarite.periode.type == 'I'}">checked</c:if>/>
                &nbsp;Du:</label> 
                    <input type="text" 
                           data-date-format="dd/mm/yyyy"
                           name="date_debut_intervalle" 
                           id="date_debut_intervalle" 
                           class="form-control periode-date datepicker-input" 
                           size="5" 
                           value="<c:if test="${scolarite.periode.type == 'I'}">${scolarite.periode.debutFormated}</c:if>" <c:if test="${scolarite.periode.type != 'I'}">disabled</c:if>
                    /> 
                Au: <input type="text" 
                           name="date_fin_intervalle" 
                           data-date-format="dd/mm/yyyy"
                           id="date_fin_intervalle" 
                           class="form-control periode-date datepicker-input" 
                           size="5" 
                           value="<c:if test="${scolarite.periode.type == 'I'}">${scolarite.periode.finFormated}</c:if>" <c:if test="${scolarite.periode.type != 'I'}">disabled</c:if> 
                    />
            <%--    <br/>
                
            <label for="periode_fin">
                <input type="radio" 
                       id="periode_fin" name="periode_type" value="fin" <c:if test="${scolarite.periode.type == 'F'}">checked</c:if>/>
                &nbsp;Jusqu'au:</label>
                <input type="text" 
                       name="date_fin" 
                       data-date-format="dd/mm/yyyy"
                       id="date_fin" 
                       class="form-control periode-date datepicker-input" 
                       size="5" 
                       value="<c:if test="${scolarite.periode.type == 'F'}">${scolarite.periode.finFormated}</c:if>" <c:if test="${scolarite.periode.type != 'F'}">disabled</c:if> 
                />
                <br/>--%>
        </div>
        <form:hidden id="periode" path="periode" />
    </div>
    
	<div class="form-group">
   		<label class="col-sm-2 control-label" for="mef">MEF</label>
   		<div class="col-sm-10">
			<select name="mefid" id="mef">
				<option value="0">-</option>
				<c:forEach items="${mefs}" var="m"> 
                    <option value="${m.id}" <c:if test="${m.id == scolarite.mef.id}">selected</c:if>>${m.libelleLong}</option>
				</c:forEach>
			</select>
		</div>
	</div>
	
	<div class="form-group">
   		<label class="col-sm-2 control-label" for="classe">Classe</label>
   		<div class="col-sm-10">
   			<select name="classeid" id="classe">
   				<option value="0">-</option>
   				<c:forEach items="${classes}" var="cl">
   					<option value="${cl.id}" <c:if test="${cl.id == scolarite.classe.id}">selected</c:if>>${cl.libelle}</option>
   				</c:forEach>
   			</select>
		</div>
	</div>
	
	<div class="form-group">
   		<label class="col-sm-2 control-label" for="nom">Options</label>
        <div class="col-sm-10" id="options" style="overflow: auto; height: 300px">
<% 
    if(!programmes.isEmpty()){
%>
            <ul>
<%      for(ProgrammeMEF p : programmes){ 
           
            if(!p.getModalite().equals("O") && !p.getModalite().equals("F")){
                continue;
            }
%>
            <c:set var="p" value="<%=p %>" />

                <li>
                    <label for="ck_Option_${p.matiere.id}">
                        <input type="checkbox" 
                               name="option" 
                               id="ck_Option_${p.matiere.id}" 
                               value="${p.matiere.id}-${p.modalite}" 
                               <% if(scolarite.getOption(p.getMatiere().getId(), p.getModalite()) != null){ %>checked<% } %> />
                        ${p.matiere.libelleLong} (${p.modalite})
                    </label>
                </li>
<%      } %> 
            </ul>
<%  } %>
		</div>
	</div>
</form:form>